<template>
  <div class="info">
      <div>
    <div class="head">
        <div class="back">
            <van-icon name="arrow-left" class="van" @click="backHome"/>
        </div>
        <div class="right">
        <div class="back">
            <van-icon name="upgrade" class="van"/>
        </div>
        <div class="back">
            <van-icon name="star-o" class="van"/>
        </div>
        <div class="back">
            <van-icon name="ellipsis" class="van"/>
        </div>
        </div>
    </div>
    <div class="content">
        <h3>{{list.shopName}}</h3>
        <van-icon name="edit" size="30px" class="edit" color="#FFC002" @click="comment"/>
        <div>
           <van-rate v-model="list.totalStart" />
            <span class="num">{{list.remarkCount}}条</span>
            <span class="money">{{list.avgPrice}}元/人</span>
        </div>
        <div class="pinjia">
            <span> 口味：{{list.foodStart}}</span>
            <span> 环境：{{list.envStart}}</span>
            <span> 服务：{{list.totalStart}}</span>
            <span> 食材：{{list.tasteStart}}</span>
            <span class="sic">{{list.tag}}</span>
        </div>
    </div>
    <div class="img">
        <van-swipe  :height="200"
        indicator-color="#fff">
         <van-swipe-item   v-for="(item, index) in list.imgs" :key="index">
                <img :src="item" alt="" class="tupian">
            </van-swipe-item>
             </van-swipe>
    </div>
    <div class="information">
        <van-icon name="shop-o" size="20px"/>
        <span>营业中 | {{list.businessTime}}</span>
        <div class="yaoqiu">
            <span>有包厢</span>
            <span>有露台</span>
            <span>有露天位</span>
            <span>开放厨房</span>
            <span class="link"><van-icon name="arrow" size="20px"/></span>
              </div>
              <van-divider />
    </div>
    <div class="adress">
        <div class="left">
        <van-icon name="location-o" />
        <span>{{list.shopAddr}}</span>
        <p>距您步行{{distance}}，需要11分钟</p>
        </div>
        <div class="right">
        <van-icon name="phone" color="#FFBE09" size="40px"/>
        </div>
    </div>
     <van-divider />
     <div class="main">
         <div><van-icon name="checked" color="#88E08E" size="25px"/>订座</div>
         <div><van-icon name="bag" color="#FFCC01" size="25px"/>外卖</div>
         <div><van-icon name="manager" color="#00589B" size="25px"/>打车</div>
     </div>
     <div class="hot">
         <van-icon name="hot" size="40px" color="red"/>
         <span>羊西线美食热门榜第1名</span>
         <van-icon name="arrow" size="25px"/>
     </div>
     <div>
         <van-tabs v-model="activeName" color="#FFCF15" title-active-color="#FFCF15" >
  <van-tab title="优惠信息" name="a"><h1>优惠信息</h1></van-tab>
  <van-tab title="精彩点评" name="b"><div class="user">
      <div v-for="(item, index) in commentList" :key="index">
      <br>
      <span style="font-size:20px">用户：{{item.username}}</span>
      <span class="time">评论时间：{{item.create_time | dateFormat}}</span>
      <br>
      <van-rate v-model="item.total_start" readonly />
      <p>{{item.content}}</p>
      </div>
      <van-divider />
  </div></van-tab>
  <van-tab title="更多推荐" name="c"><h1>更多推荐</h1></van-tab>
</van-tabs>
     </div>
     </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      list: [ ],
      commentList: [],
      id: '',
      activeName: 'b',
      distance: ''
    }
  },

  created () {
    this.getList()
    this.getcommentList()
  },

  methods: {
    async getList () {
      this.id = location.hash.split('/')[2]
      this.distance = location.hash.split('/')[3]
      const { data: res } = await this.$http.get('shops/shopDetail/' + this.id)
      this.list = res.data
      console.log(this.list)
      console.log(res)
    },
    async getcommentList () {
      const { data: res } = await this.$http.get('remark/list/'+this.id+'/1/5')
      this.commentList = res.data.rows
      console.log(this.commentList)
    },
    comment () {
      this.$router.push('/comment/' + this.id)
    },
    backHome () {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped lang="less">
.info {
    width: 100%;
}
.head {
    width: 100%;
    height: 100px;
    background-image: url('../../assets/hotfood.jpg');
    background-size:100% 100%;
    background-repeat:no-repeat;
    padding-top: 30px;
    box-sizing: border-box;

}
.back {
    float: left;
    width: 25px;
    height: 25px;
    background-color: #000;
    opacity: .5;
    border-radius: 50%;
    margin-left: 15px;
    padding: 4px;
    box-sizing: border-box;
}
.back .van {
    color: #fff;
}
.right {
    float: right;
    margin-right: 10px;
}
.content {
  margin-left: 10px;
  margin-bottom: 30px;
}
.content h3 {
    display: inline-block;
}
.content .edit {
    float: right;
    margin-right: 30px;
    margin-top: 20px;
}
.num {
    margin-left: 20px;
}
.money {
    margin-left: 20px;
}
.pinjia {
    font-size: 13px;
    color: #A3A3A3;
}
.sic {
    margin-left: 30px;
}
.img .tupian {
    width: 100%;
}
.information {
    margin-top: 20px;
    margin-left: 10px;
}
.yaoqiu span{
    display: inline-block;
    border: 1px solid #BBBBBB;
    color: #BBBBBB;
    padding: 5px;
    margin-top: 10px;
    margin-right: 5px;
    font-size: 13px;
}
.information .link {
    border: none;
    float: right;
}
.adress {
    margin-left: 10px;
    margin-top: 20px;
}
.left {
    float: left;
    width: 260px;
}
.left p{
    margin-top: 5px;
    font-size: 15px;
    color: #9F9F9F;
}
.right {
    float: right;
}
.main {
    width: 350px;
    height: 50px;
    display: flex;
    margin-top: 20px;
    margin-left: 10px;
}
.main div{
    flex:1;
    line-height: 50px;
    margin-top: 20px;
    margin-left: 20px;
}
.main div .icon{
    margin-top: 10px;
}
.hot {
    margin-left: 10px;
    margin-top: 20px;
    height: 50px;
    box-shadow: 1px 1px 5px #ccc;
}
.hot span {
    margin-bottom: 20px;
    font-size: 25px;
}
.user {
    margin-left: 20px;
}
.time {
    float: right;
    margin-right: 10px;
    font-size: 14px;
    color: #9F9F9F;
}
</style>
